import React from 'react';
import './Dashboard.scss';
import VisitorVolume from './visitorVolume';

interface CardProps {
  title: string;
  placeholder:  React.ReactNode; //组件内容
  description: string;
}

const Card: React.FC<CardProps> = ({ title, placeholder, description }) => (
  <div className="card" > {/* 直接在div上应用背景颜色 */}
    <div className="title">{title}</div>
    <div className="chart-placeholder">{placeholder}</div> {/* 占位div，代替图表图片 */}
    <div className="description">{description}</div>
  </div>
);

const Dashboard: React.FC = () => {
  const cardsData = [
    {
      title: '每日访问统计',
      placeholder: <VisitorVolume/>, // 蓝紫色
      description: '描述行为趋势的内容...',
    },
    {
      title: '接口访问统计',
      placeholder: 'test2', // 浅蓝色
      description: '描述居住趋势的内容...',
    },
    {
      title: '平均响应时间统计',
      placeholder: 'test3', // 浅黄色
      description: '描述水果信息的内容...',
    },
  ];

  return (
    <div className="container">
      {cardsData.map((data, index) => (
        <Card key={index} {...data} />
      ))}
    </div>
  );
};

export default Dashboard;